<template>
    <div>
        <van-cell icon="arrow-left" @click="back" style="background-color: #0086b3;align-content:center">
            <font color="#f0ffff">修改密码</font>
        </van-cell>
        <van-form :model="ruleForm">
            <van-field v-model="ruleForm.pass" label="原始密码" :rules="[{required:true,message:'请输入原始密码'}]" />
            <van-field v-model="ruleForm.password" label="新密码" :rules="[{required:true,message:'请输入新密码'}]" />
            <div style="margin-top: 200px;margin-left: 10px;margin-right: 10px">
                <v-button large primary value="大号+主按钮"></v-button>
                <van-button color="#0086b3" native-type="submit" @click="updateUser()" block>确定</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    export default {
        name: 'Xiugai',
        data () {
            return {
                ruleForm: [{
                    id:sessionStorage.getItem("id"),
                    pass: '',
                    password: '',
                    p1:sessionStorage.getItem("password")
                }
                ]
            }
        },
        methods: {
            back () {
                this.$router.go(-1)
            },
            async updateUser () {

                this.ruleForm.p1 = sessionStorage.getItem('password');
                if (this.ruleForm.pass !== this.ruleForm.p1) {
                    alert("原始密码错误！！！")
                }else{
                    this.ruleForm.id = sessionStorage.getItem('id');
                    this.$axios.post('/update',{
                        id:sessionStorage.getItem('id'),
                        password:this.ruleForm.password
                    })
                        .then(response => {
                            if (response.data.flag === 1) {
                                this.$router.replace({path: '/'})
                            } else {
                                alert("修改失败!!!");
                            }
                        })
                }
            }
        }
    }
</script>

<style scoped>

</style>
